<template>
  <div>
    <a-drawer title="物流" placement="right" :closable="false" :visible="visible" @close="onClose" :width="900" destroyOnClose>
      <a-tabs :activeKey="activeKey" @change="handleChange">
        <a-tab-pane :key="1" tab="搭盒物流"> </a-tab-pane>
        <a-tab-pane :key="5" tab="补货物流" force-render> </a-tab-pane>
        <a-tab-pane :key="6" tab="换码物流" force-render> </a-tab-pane>
        <a-tab-pane :key="2" tab="还货物流" force-render> </a-tab-pane>
      </a-tabs>
      <a-spin :spinning="loading">
        <ul class="list" v-if="list.length > 0">
          <li v-for="item in list" :key="item.id">
            <div class="top">
              <span>
                <span>{{ item.expressName }}:{{ item.expressNo }}</span>
                <span>({{ statusType[item.status] }})</span>
                <!-- {{ item.createTime }} -->
                <!-- <b>{{ item.type | expressType(expressStatus) }}</b> -->
              </span>
              <span>
                <!-- 单号：{{ item.expressNo }} -->
                <!-- <a-popconfirm v-show="activeKey == 2" style="margin-left: 18px" title="确定取消当前预约的快递?" ok-text="Yes" cancel-text="No" @confirm="confirmExpress" @cancel="cancelExpress">
                  <a-button>取消预约</a-button>
                </a-popconfirm> -->
                <b>{{ item.type | expressType(expressStatus) }}</b>
                <span v-if="item.type == 20">：{{ item.boxReturnSn }}</span>
              </span>
            </div>
            <div class="content">
              <div class="logistics" :style="{ height: item.toggle ? '100px' : 'auto' }">
                <p v-for="(childItem, childIndex) in item.delivery" :key="childIndex">{{ childItem.acceptTime }} {{ childItem.acceptAddress }} {{ childItem.remark }}</p>
              </div>
              <div class="edit-toggle">
                <div v-if="(activeKey == 1 || activeKey == 5) && item.status != 30">
                  <a-popconfirm title="是否确认签收?" @confirm="signClick(item)">
                    <a>手动签收</a>
                  </a-popconfirm>
                </div>

                <div v-if="activeKey == 1 || activeKey == 2 || activeKey == 5">
                  <a @click="clickModel(item)" v-if="item.status != 30 && item.status != 40">修改快递</a>
                </div>
                <div v-if="item.delivery && item.delivery.length > 3">
                  <a @click="toggle(item)">{{ item.toggle ? '展开' : '收起' }}</a>
                </div>
              </div>
            </div>
          </li>
        </ul>
        <a-empty v-else style="margin-top: 36px" />
      </a-spin>
    </a-drawer>
    <a-modal v-model="visibleModel" title="更正快递信息" :width="900" centered @ok="handleSubmit">
      <a-form>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="物流单号" required>
          <a-input placeholder="请输入" :style="{ width: '50%' }" v-model="orderNumber" />
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="物流公司">
          <a-select placeholder="请选择" :style="{ width: '50%' }" v-model="companyName">
            <a-select-option :value="item.name" v-for="(item, index) in companyList" :key="index">{{ item.name }}</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
import { findLogisticGroup, findExpressType, logisticsDetails, handSignAndReceive, updateExpressNo } from '@/api/box/order'
import { getLogisticsCompany } from '@/views/box/util/global'
import globalData from '@/views/box/util/global'
export default {
  data() {
    return {
      expressStatus: [],
      statusType: {
        10: '待取件',
        20: '待签收',
        30: '已签收',
        40: '取消'
      },
      visible: false,
      visibleModel: false,
      activeKey: 1,
      boxId: '',
      loading: true,
      companyList: [],
      list: [],
      routeResps: [],
      orderNumber: '',
      companyName: '',
      expressId: '',
      labelCol: {
        xs: { span: 3 },
        sm: { span: 3 }
      },
      wrapperCol: {
        xs: { span: 20 },
        sm: { span: 20 }
      }
    }
  },
  filters: {
    expressType(v, expressStatus) {
      if (v) {
        let result = expressStatus.filter(e => e.key == v)
        if (result.length > 0) return result[0].value
        return v
      }
    }
  },
  methods: {
    handleSubmit() {
      if (!this.orderNumber && !this.companyName) {
        this.$message.warning('请填写完整的信息')
        return
      }
      let params = {
        requestData: {
          expressId: this.expressId,
          updateExpressName: this.companyName,
          updateExpressNo: this.orderNumber
        }
      }
      updateExpressNo(params).then(res => {
        if (res.code == 0) {
          this.$message.success('修改单号成功')
          this.fetchData()
        } else {
          this.$message.warning(res.msg)
        }
        this.visibleModel = false
        this.orderNumber = ''
        this.companyName = ''
      })
    },
    async clickModel(item) {
      this.expressId = item.id //
      if (globalData.logisticsCompany && globalData.logisticsCompany.length > 0) {
        this.companyList = globalData.logisticsCompany
      } else {
        this.companyList = await getLogisticsCompany()
      }
      this.visibleModel = true
    },
    getStatus() {
      findExpressType()
        .then(res => {
          if (res.code == 0) {
            this.expressStatus = res.data
          } else {
            this.$message.warning(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    show(id, unionid, type) {
      console.log(id)
      console.log(type)
      if (type && type == 2) {
        this.activeKey = 2
      }
      this.boxId = id
      this.loading = true
      this.getStatus()
      this.fetchData()

      this.visible = true
    },
    onClose() {
      this.visible = false
      this.activeKey = 1
      this.list = []
    },
    handleChange(activeKey) {
      this.activeKey = activeKey
      this.loading = true
      this.fetchData()
    },
    // 物流列表
    fetchData() {
      let params = {
        requestData: {
          boxId: this.boxId,
          type: this.activeKey
        }
      }
      findLogisticGroup(params)
        .then(res => {
          if (res.code == 0) {
            this.list = res.data
            console.log(this.list, ' this.list')
            if (this.list && this.list.length > 0) {
              for (let item of this.list) {
                item.toggle = true
              }
              const arr = this.list.map(e => e.id)

              this.fetchDetail(arr)
            } else {
              this.list = []
            }
          } else {
            this.$message.warning(res.msg)
            this.list = []
          }
          setTimeout(() => {
            this.loading = false
          }, 200)
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 物流详情
    fetchDetail(arr) {
      let params = {
        requestData: {
          expressIds: arr
        }
      }
      logisticsDetails(params).then(res => {
        if (res.code == 0) {
          this.routeResps = res.data
          for (let item of this.list) {
            let result = this.routeResps.filter(e => e.expressNo == item.expressNo)
            if (result.length > 0) {
              item.delivery = result[0].routes
            }
          }
          this.$forceUpdate()
        }
      })
    },
    //手动签收
    signClick(item) {
      console.log(item)
      let params = {}
      if (item.type == 10 || item.type == 70) {
        params = {
          boxId: item.boxId,
          expressId: item.id
        }
      } else if (item.type == 50) {
        params = {
          supId: item.origId,
          expressId: item.id
        }
      }

      const data = {
        page: {
          pageNo: 1,
          pageSize: 100
        },
        requestData: params
      }

      handSignAndReceive(data).then(res => {
        if (res.code === 0) {
          this.$message.success('签收成功')
          this.fetchData()
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    // 取消预约确定
    confirmExpress() {},
    // 取消预约取消
    cancelExpress() {},
    // 展开收起
    toggle(item) {
      item.toggle = !item.toggle
      this.$forceUpdate()
    }
  }
}
</script>
<style lang="less" scoped>
.list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-radius: 4px;
  overflow: hidden;
  li {
    list-style: none;
    border: 1px solid #d9d9d9;
    margin-bottom: 16px;
    .top {
      background: #fafafa;
      border-bottom: 1px solid #d9d9d9;
      line-height: 24px;
      padding: 12px 16px;
      color: rgba(0, 0, 0, 0.85);
      display: flex;
      justify-content: space-between;
      span {
        b {
          margin-left: 8px;
        }
      }
    }
    .content {
      color: rgba(0, 0, 0, 0.65);
      background-color: #fff;
      padding: 16px;
      .logistics {
        overflow: hidden;
      }
      .toggle {
        width: 100%;
        text-align: right;
        box-sizing: border-box;
        line-height: 22px;
        background-color: #fff;
      }
    }
  }
}
.edit-toggle {
  display: flex;
  justify-content: flex-end;
  div {
    margin-right: 5px;
  }
}
</style>
